<template>
  <div class="p-2">
    <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="From地址" prop="sender">
                    <el-input v-model="queryParams.sender" placeholder="请输入From地址" clearable @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="From网络" prop="source">
                    <el-input v-model="queryParams.source" placeholder="请输入From网络" clearable @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="Token" prop="tokenType">
                    <el-select v-model="queryParams.tokenType" placeholder="请选择Toekn" clearable>
                        <el-option label="USDT" value="USDT" />
                        <el-option label="USDC" value="USDC" />
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="transferType">
                    <el-select v-model="queryParams.transferType" placeholder="请选择类型" clearable>
                        <el-option label="转入" value="in" />
                        <el-option label="取出" value="out" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                        <el-option label="成功" value="completed" />
                        <el-option label="处理中" value="pending" />
                        <el-option label="待审核" value="Pending_review" />
                        <el-option label="失败" value="failed" />
                    </el-select>
                </el-form-item>
                <el-form-item label="To地址" prop="recipient" label-width="110">
                    <el-input v-model="queryParams.recipient" placeholder="请输入To地址" clearable
                            @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="To网络" prop="target" label-width="110">
                    <el-input v-model="queryParams.target" placeholder="请输入To网络" clearable
                            @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

    <el-card shadow="never">
        <el-table v-loading="loading" border :data="productList">
            <el-table-column label="ID" align="center"  prop="id"></el-table-column>
            <el-table-column label="地址" align="center"  width="400">
                <template #default="scope">
                    <div>From:{{ scope.row.sender }}</div>
                    <div>To:{{ scope.row.recipient }}</div>
                </template>
            </el-table-column>
            <el-table-column label="Token" align="center">
                <template #default="scope">
                    <div>{{ scope.row.tokenType }}</div>
                </template>
            </el-table-column>
            <el-table-column label="类型" align="center" prop="status">
                <template #default="scope">
                    <div>{{ scope.row.transferType }}</div>
                </template>
            </el-table-column>
            <el-table-column label="网络" align="center">
                <template #default="scope">
                    <div>From:{{ scope.row.source }}</div>
                    <div>To:{{ scope.row.target }}</div>
                </template>
            </el-table-column>
            <el-table-column label="金额" align="center">
            <template #default="{ row }">
                {{ row.realAmount }}
            </template>
            </el-table-column>
            <el-table-column label="手续费" align="center">
            <template #default="{ row }">
                {{ row.fee }}
            </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
            <template #default="{ row }">
                {{ row.status }}
            </template>
            </el-table-column>
            <el-table-column label="时间" align="center" width="250px">
                <template #default="scope">
                    <div>创建时间：{{ scope.row.createdAt }}</div>
                    <div>处理时间：{{ scope.row.updatedAt }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-dropdown>
                  <el-button type="text">
                    <el-icon>
                      <more />
                    </el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item v-if="scope.row.status == 'Pending_review'" v-hasPermi="['business:events:publish']" @click="handlerChecked(scope.row)">
                        审核通过
                      </el-dropdown-item>
                      <el-dropdown-item @click="openDetail(scope.row)">
                        明细
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
        </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px" append-to-body>
      <el-descriptions title="" :column="2" :border="true">
        <el-descriptions-item label="From网络">{{formData.source}}</el-descriptions-item>
        <el-descriptions-item label="To网络">{{formData.target}}</el-descriptions-item>
        <el-descriptions-item label="类型">{{formData.transferType}}</el-descriptions-item>
        <el-descriptions-item label="Token">{{formData.tokenType}}</el-descriptions-item>
        <el-descriptions-item label="From地址" :span="2">{{formData.sender}}</el-descriptions-item>
        <el-descriptions-item label="To地址" :span="2">{{formData.recipient}}</el-descriptions-item>
        <el-descriptions-item label="From Hash" :span="2">{{formData.sourceTxHash}}</el-descriptions-item>
        <el-descriptions-item label="To Hash" :span="2">{{formData.targetTxHash}}</el-descriptions-item>
        <el-descriptions-item label="From blockNumber">{{formData.blockNumber}}</el-descriptions-item>
        <el-descriptions-item label="To blockNumber">{{formData.targetBlockNumber}}</el-descriptions-item>
        <el-descriptions-item label="金额">{{formData.realAmount}}</el-descriptions-item>
        <el-descriptions-item label="手续费">{{formData.fee}}</el-descriptions-item>
        <el-descriptions-item label="监听事件">{{formData.createdAt}}</el-descriptions-item>
        <el-descriptions-item label="处理完成事件">{{formData.updatedAt}}</el-descriptions-item>
        <el-descriptions-item label="异常" :span="2">{{formData.error}}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="events" lang="ts">
import { listEvents, publishEvent } from '@/api/mongo/events';
import { ref, watch } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const productList = ref<any[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);

const queryFormRef = ref<ElFormInstance>();
const total = ref(0);
const currencyArr = ref([]);
const queryParams = ref({
    status:'',
    sender:'',
    recipient:'',
    tokenType:'',
    transferType:'',
    source:'',
    target:'',
    pageNum:1,
    pageSize:20
})

const handlerChecked = async (row:any)=>{
  const id = row.id;
  await publishEvent(id);
  proxy?.$modal.msgSuccess("操作成功");
}

const dialog = ref({
  title:'交易明细',
  visible:false
})

const formData = ref({
  eventId: '',
  type: '',
  transferType: '',
  status: '',
  blockNumber: '',
  sender: '',
  recipient: '',
  token: '',
  tokenType:'',
  amount: '',
  fee:'',
  realAmount: '',
  sourceTxHash: '',
  source:'',
  target:'',
  targetTxHash:'',
  targetBlockNumber: '',
  error:'',
  createdAt: '',
  updatedAt:''
})

const openDetail = (row)=>{
  formData.value = row;
  dialog.value.visible = true;
}

const cancel = ()=>{
  dialog.value.visible = false;
}


/** 查询产品列表 */
const getList = async () => {
  loading.value = true;
  const res = await listEvents(queryParams.value);
  productList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

onMounted(() => {
  getList();
});
</script>
<style scoped>
.dynamic-form-container {
  padding: 20px;
  max-width: 600px;
}

.dynamic-form {
  margin-top: 20px;
}

.inputNumberClass[class-unit] {
  --el-input-number-unit-offset-x: 35px;
  position: relative;
}

.inputNumberClass[class-unit]::after {
  content: attr(class-unit);
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: var(--el-input-number-unit-offset-x);
  color: #999999;
}

.inputNumberClass[class-unit] .el-input__inner {
  padding-left: 30px;
  padding-right: calc(var(--el-input-number-unit-offset-x) + 12px);
}

.my-json-viewer {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f8f8f8;
}

/* 自定义颜色 */
.my-json-viewer .vjs-key {
  color: #d63200;
}

.my-json-viewer .vjs-value {
  color: #1a1a1a;
}
</style>
